<template>
    <u-upload :fileList="list" @afterRead="after" @delete="del"
        :maxCount="maxCount" :multiple="multiple" :name="name">
    </u-upload>
</template>

<script>
    import UUpload from '../../uni_modules/uview-ui/components/u-upload/props.js'
    export default{
        props: {
            ...UUpload.props,
            value: Array
        },
        data() {
          return {
            list: []
          }
        },
        watch: {
          value: {
            handler: function(newLsit) {
              this.list = newLsit.map(item => {
                return {
                  ...item,
                  url: this.joinDomain(item.url)
                }
              })
            },
            deep: true
          }
        },
        methods: {
          // 读取前的处理函数
          after(e) {
            const { file } = e
            let files = []
            console.log(file)
            if(!file.length) {
              // 单张上传
              files.push(file)
            } else {
              // 多张上传
              files = file
            }
            console.log(files)
            files.forEach((item) => {
              this.$http.uploadFile(item.url).then(res => {
                  console.log(res)
                  this.$emit('input', [...this.value, res.data])
              })
            })
          },
          del(event) {
            const { index } = event
            this.$emit('input', this.value.filter((_, i) => index !== i))
          }
          // {
          //     "file": {
          //         "type": "image",
          //         "url": "blob:http://localhost:8080/8d9e5e24-2007-4f24-a2ae-ddeccce27ee6",
          //         "thumb": "blob:http://localhost:8080/8d9e5e24-2007-4f24-a2ae-ddeccce27ee6",
          //         "size": 86582,
          //         "name": "upload_1e11e3ffdd308838cf27d83338fbfd5f.png"
          //     },
          //     "name": "1",
          //     "index": 2
          // }
        }
    }
</script>

<style>
</style>